<template>
	<view class="content">
		<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
		<u--form labelPosition="left" :model="userInfo" :rules="rules" ref="uForm">
			<u-form-item label="头像" prop="avatar" :labelWidth="labelWidth" borderBottom ref="item1" required>
				<u-avatar shape="circle" :src="userInfo.avatar" @click="previewImage"></u-avatar>
				<!-- <u-avatar v-else shape="circle" :src="userInfo.avatar" @click="selceAvatar"></u-avatar> -->
			</u-form-item>
			<u-form-item label="昵称" :labelWidth="labelWidth" prop="nickName" borderBottom ref="item1" required>
				<u--input placeholder="请输入昵称" v-model="userInfo.nickName" border="none"></u--input>
			</u-form-item>
			<u-form-item label="性别" :labelWidth="labelWidth" prop="sexValue" borderBottom
				@click="showSex = true; hideKeyboard()" ref="item1" required>
				<u--input v-model="userInfo.sexValue" disabled disabledColor="#ffffff" placeholder="请选择性别"
					border="none"></u--input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
			<u-form-item>
				<u-button shape="circle" class="myBtn" type="primary" @click="save" text="保存"></u-button>
			</u-form-item>

		</u--form>
		<u-action-sheet :show="showSex" :actions="actions" title="请选择性别" @close="showSex = false" @select="sexSelect">
		</u-action-sheet>
	</view>
</template>

<script>
	import {
		baseUrl
	} from '@/config/config.js'
	import {
		getUserInfo,
		setUserInfo
	} from '@/config/api.js'
	export default {
		data() {
			return {
				labelWidth: 80,
				showSex: false,
				userInfo: {
					avatar: '',
					nickName: '',
					sex: '',
					sexValue: ''
				},
				actions: [{
						name: '男',
						value: 1
					},
					{
						name: '女',
						value: 2
					},
					{
						name: '保密',
						value: 0
					},
				],
				rules: {
					'nickName': {
						type: 'string',
						required: true,
						message: '请填写昵称',
						trigger: ['blur', 'change']
					},
					'sexValue': {
						type: 'string',
						min: 0,
						max: 2,
						required: true,
						message: '请选择性别',
						trigger: ['blur', 'change']
					},
				},
				radio: '',
				switchVal: false
			};
		},
		onLoad() {
			this.getUser();
		},
		methods: {
			getUser() {
				getUserInfo({}).then((res) => {
					this.userInfo = res.data
					console.log()
					if (res.data) {
						if (res.data.sex) {
							if (res.data.sex == 0) {
								this.userInfo.sexValue = '保密'
							} else if (res.data.sex == 1) {
								this.userInfo.sexValue = '男'
							} else if (res.data.sex == 2) {
								this.userInfo.sexValue = '女'
							}
						}
						this.$store.commit('setUserInfo', res.data);
					}
				})
			},
			save() {
				if (this.userInfo.nickName == '' || this.userInfo.nickName.length <= 0) {
					uni.$u.toast("昵称必填")
					return;
				}
				if (this.userInfo.sexValue == '' || this.userInfo.sexValue.length <= 0) {
					uni.$u.toast("性别必填")
					return;
				}

				let _this = this
				let data = {
					sex: this.userInfo.sex,
					avatar: this.userInfo.avatar,
					nickName: this.userInfo.nickName
				}
				console.log("avatarUrl  ==> ", this.userInfo.avatar)
				console.log("nickName  ==> ", this.userInfo.nickName)
				setUserInfo(data).then((res) => {
					if (res.code == 200) {
						uni.$u.toast("保存成功")
						_this.$store.commit('setNickName', this.userInfo.nickName);
						setTimeout(() => {
							uni.navigateBack();
						}, 1000);
					} else {
						uni.$u.toast(res.msg)
					}
				})
			},
			sexSelect(e) {
				this.userInfo.sexValue = e.name
				this.userInfo.sex = e.value
				this.$refs.uForm.validateField('sexValue')
			},
			previewImage() {
				if (this.userInfo.avatar) {
					let _this = this
					let avatar = this.userInfo.avatar
					uni.previewImage({
						current: this.userInfo.avatar,
						urls: [this.userInfo.avatar],
						longPressActions: {
							itemList: ['更换头像', '保存图片'],
							success: function(data) {
								// console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
								if (data.tapIndex == 0) {
									_this.selceAvatar();
								} else {
									uni.saveImageToPhotosAlbum({
										filePath: avatar,
										success: function() {
											console.log('保存成功');
											uni.$u.toast("保存成功")
										}
									});
								}
							},
							fail: function(err) {
								uni.$u.toast("保存失败")
								console.log(err.errMsg);
							}
						}
					})
				} else {
					this.selceAvatar()
				}
			},
			selceAvatar() {
				let _this = this
				let uploadUrl = '/upload/uploadAvatar';
				uni.chooseImage({
					count: 1, //默认9
					fileType: 'image',
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						uni.$u.http.upload(uploadUrl, {
							params: {},
							/* 会加在url上 */
							// #ifdef APP-PLUS || H5
							files: [], // 需要上传的文件列表。使用 files 时，filePath 和 name 不生效。App、H5（ 2.6.15+）
							// #endif
							// #ifdef MP-ALIPAY
							fileType: 'image', // 仅支付宝小程序，且必填。
							// #endif
							filePath: res.tempFilePaths[0], // 要上传文件资源的路径。
							// 注：如果局部custom与全局custom有同名属性，则后面的属性会覆盖前面的属性，相当于Object.assign(全局，局部)
							custom: {
								auth: true
							}, // 可以加一些自定义参数，在拦截器等地方使用。比如这里我加了一个auth，可在拦截器里拿到，如果true就传token
							name: 'file', // 文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容
							// #ifdef H5 || APP-PLUS
							timeout: 60000, // H5(HBuilderX 2.9.9+)、APP(HBuilderX 2.9.9+)
							// #endif
							header: {},
							/* 会与全局header合并，如有同名属性，局部覆盖全局 */
							formData: {}, // HTTP 请求中其他额外的 form data
							// 返回当前请求的task, options。请勿在此处修改options。非必填
							getTask: (task, options) => {
								// task.onProgressUpdate((res) => {
								//   console.log('上传进度' + res.progress);
								//   console.log('已经上传的数据长度' + res.totalBytesSent);
								//   console.log('预期需要上传的数据总长度' + res.totalBytesExpectedToSend);
								//
								//   // 测试条件，取消上传任务。
								//   if (res.progress > 50) {
								//     uploadTask.abort();
								//   }
								// });
							},
							//validateStatus: (statusCode) => { // statusCode 必存在。此处示例为全局默认配置。演示，非必填选项
							//	return statusCode >= 200 && statusCode < 300
							//}
						}).then(res => {
							// 返回的res.data 已经进行JSON.parse
							console.log("上传成功  ==> ", res);
							console.log("上传成功  ==> ", res.data.url);
							_this.userInfo.avatar = res.data.url;
							console.log("缓存头像  ==> ", _this.userInfo.avatar);
							// uni.$u.toast("上传成功")
						}).catch(err => {
							uni.$u.toast(res.msg)
						})
					}
				});
			},
			upload(tempFiles) {
				let uploadUrl = baseUrl + '/uploadAvatar';
				console.log("图片上传地址  ==> ", uploadUrl);
			},

		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules)
		},
	};
</script>

<style scoped>
	.content {
		padding: 20px;
	}

	.myBtn {
		width: 80%;
		margin-top: 30px;
	}
</style>